<template>
  <div class="bottomLeft">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2" id="zdgzywltitle">
        <div class="d-flex" style="margin-left:10px;margin-top:8px;color:#eaedf3;">
          <span><i class="iconfont icon-chart-line" /></span>
          <span class="fs-xl text mx-2 mt-1" style="font-size:19px">日间手术病种排名</span>
        </div>
      </div>
      <div class="d-flex mt-1 jc-center body-box" style="width:98%;">
        <dv-scroll-ranking-board :config="config" style="width:98%;height:500px" />
      </div>
    </div>
  </div>
</template> 

<script>
 import { defineComponent, reactive } from 'vue'
export default defineComponent({
  setup() {
    const config = reactive({
      data: [
    {
      name: '周口',
      value: 55
    },
    {
      name: '南阳',
      value: 120
    },
    {
      name: '西峡',
      value: 78
    },
    {
      name: '驻马店',
      value: 66
    },
    {
      name: '新乡',
      value: 80
    },
    {
      name: '信阳',
      value: 45
    },
    {
      name: '漯河',
      value: 29
    },
    {
      name: '漯河',
      value: 29
    }
    ,
    {
      name: '信阳',
      value: 45
    },
    {
      name: '漯河',
      value: 29
    },
    {
      name: '漯河',
      value: 29
    }
   ],
    rowNum:9,
    })
    return { config }
  }
  
})
</script>

<style lang="scss" scoped>
$box-height:600px;
$box-width:600px;
.bottomLeft {
  padding: 20px 16px;
  height: $box-height;
  width: $box-width;

}  .bg-color-black {
    #zdgzywltitle
    {
      margin:auto 30%;
    }
    #zdgzywltitle span
    {
      font-size: 20px;
    }
  }
  .text {
    color: #c3cbde;
  }
</style>
